<template>
	<div class='project-files'>
		<el-form>
			<h2 class="center">附件信息</h2>
			<!-- 附件列表 -->
			<div
				v-if="files.length===0"
				class="center"
			>
				无附件信息
			</div>
			<div class="files">
				<div
					class="file"
					v-for="(file,index) in files"
					:key="index"
				>
					<div
						class="filename"
						:style="{
							color: file.passed ? '$blue' : '#727171'
						}"
						@click="clickFile(file)"
					>
						{{file.name}}
					</div>
					<div class="count">
						<div style="margin: 5px 0;">
							<span	class="price">
								<Iconfont
									color= '#f8b86b'
									name='icon-qian'
								/>
								{{file.price || 0}}
							</span>
							<span class="loadAmount">
								<Iconfont
									type=''
									color= '#409eff'
									name='el-icon-download'
								/>
								{{file.download || 0}}
							</span>
							<span	class="score">
								<Iconfont
									type=''
									color= '#f56c6c'
									name='el-icon-star-on'
								/>
								{{file.score || 0}}
							</span>
							<span	class="score-count">
								<Iconfont
									type=''
									color= '#956134'
									name='el-icon-chat-dot-round'
								/>
								{{file.scoreCount || 0}}
							</span>
						</div>
						<div>
							<span>
								<small style="margin-right: 5px;">状态:</small>
								<el-radio-group
									v-model="file.passed"
									@change="checkFileStatus($event,file,index)"
								>
									<el-radio :label="true">已通过</el-radio>
									<el-radio :label="false">未通过</el-radio>
								</el-radio-group>
							</span>
							<span @click="deleteFile(file,index)">
								<el-button
									type="danger"
									icon="el-icon-delete"
									size="mini"
								/>
							</span>
						</div>
					</div>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
import {
  getFiles,
  checkFile,
  removeFile,
  getLoadSignature
} from '@project/api/project'
import { getFileUrl } from '@/utils/file'

export default {
  props: {
    project: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      files: []
    }
  },
  created() {
    this.loadFiles()
  },
  methods: {
    /* 获取文件信息 */
    async loadFiles() {
      const res = await getFiles({
        projectId: this.$route.query.id,
        pageNum: 1,
        pageSize: 50
      })

      this.files = res.data.pageData
      console.log(this.files)
    },
    /**
     * 修改附件通过状态
     */
    async checkFileStatus(val, file, index) {
      val = Number(val)

      this.$loading()
      try {
        await checkFile({
          resourceId: file.id,
          passed: val
        })

        if (val) {
          this.$success('该附件已通过')
        } else {
          this.$warn('已拒绝')
        }
      } catch (err) {
        console.log(err)
        this.files[ index ].passed = !val
      }
      this.$hideLoading()
    },
    /**
     * 删除附件
     */
    deleteFile(file, index) {
      this.$confirm('确认删除该附件？请勿随意使用该操作！', async() => {
        this.$loading()
        try {
          await removeFile(file.id)
          this.$success('已删除该附件')
          this.files.splice(index, 1)
        } catch (err) {
          console.log(err)
        }
        this.$hideLoading()
      })
    },
    /**
     * 点击附件, 获取访问地址，使用浏览器打开
     */
    async clickFile(file) {
      /* 图片/视频直接打开 */
      try {
        const sign = (await getLoadSignature(file.id)).data
        const url = await getFileUrl(sign)

        window.open(url)
      } catch (err) { err }
    },
  }
}
</script>

<style lang='scss' scoped>
.project-files {
  .el-form {
    height: 100%;
  }

  .file {
    padding: 10px 5px;
    margin-bottom: 10px;
    border: 1px solid $border1;
    border-radius: $radiusSmall;

    .filename {
      margin-right: 5px;
      text-decoration: underline;
      cursor: pointer;
    }

    .count {
      line-height: 1;

      .iconfont {
        font-size: 13px;
      }
    }

    span {
      margin-right: 15px;
      margin-bottom: 5px;
    }
  }
}
</style>
